<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">在线人员</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<template v-if="appHeight > 0">
				<mapView @mapDone="mapDone" ref="mapView" titlePos="center"> </mapView>
			</template>
		</view>
	</view>
</template>

<script>
	import indexApi from '@/api/index'
	export default {
		components: {},
		data() {
			return {
				appHeight: 0
			}
		},
		mounted() {
			this.statPage()
			this.init()
		},
		computed: {},
		methods: {
			init() {
				//
			},
			async statPage() {
				// 页面高度
				this.appHeight = await this.$getHeight('.nav-custom')
			},
			// 地图实例返回
			mapDone(map) {
				this.map = map
				// 初始化图层组
				this.mapGroups = L.baseLayerGroup().addTo(map)

				this.layerGroups = {
					tyGroups: L.baseLayerGroup().addTo(this.mapGroups),
					radarGroups: L.baseLayerGroup().addTo(this.mapGroups),
					cloudGroups: L.baseLayerGroup().addTo(this.mapGroups)
				}
				this.initPage()
			},
			async initPage() {
				let list = await indexApi.onlineuser({ minuteRange: 120 })
				console.info(`list:`, list)
				let data = list.data
				if (data) {
					data.forEach((el) => {
						let tip = `
		         <div class='map-water-legend'>
		                       <h3>${el.userName}</h3>
		                       <div class='mt10'>地址:${el.positionInfo}</div>
		                       </div>
		         `
						// [el.latitude, el.longitude]
						const dataMaker = L.marker([el.latitude, el.longitude], {
							icon: L.divIcon({
								// iconAnchor: [0, 20],
								className: 'map-town-legend-style',
								// iconAnchor: [0, 30],
								iconSize: [40, 40],
								html: `<img src="/static/image/map/user.png" style='width:25px' alt="" srcset=""/>`
							})
						})
							.bindPopup(tip, {
								className: 'demo-popup-online',
								offset: [-10, -20]
							})
							.addTo(this.map)
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.app-box {
		position: relative;
		width: 100%;
	}

	.right-list {
		position: absolute;
		top: 30rpx;
		right: 10rpx;
		z-index: 999;
		height: 300rpx;
	}
	/deep/.demo-popup-online {
		.leaflet-popup-content-wrapper {
			color: #fff;
			text-align: center;
			background: rgba(0, 0, 0, 0.65);
			border: 1px solid #0085ff;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
			backdrop-filter: blur(5px);
		}
		.leaflet-popup-tip {
			background: rgba(0, 0, 0, 0.65);
			border: 1px solid #0085ff;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.18);
			backdrop-filter: blur(5px);
		}
		.leaflet-popup-close-button {
			color: #fff;
		}
	}
</style>
